<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI Response</title>
  <!-- 引入外部 CSS 文件 -->
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>Ask the AI</h1>
<div class="container">
  <input type="text" id="question" placeholder="请输入问题" />
  <button id="askButton">提问</button>
  <div id="response"></div>
</div>

<!-- 微信头像，假设头像文件存放在 'images' 文件夹下 -->
<img id="wechat-avatar" src="uploads/weixinPic.jpg" alt="微信头像" title="点击联系我" onclick="window.open('https://blog.csdn.net/TM007_?spm=1000.2115.3001.5343');" />

<!-- 个人中心导航栏 -->
<div class="profile-nav" id="profileNav">
  <a href="javascript:void(0);" title="个人中心" id="profileLink">个人中心</a>
</div>



<!-- 用户个人中心弹窗 -->
<div id="profileModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2>个人中心</h2>
    <p id="userName">用户名: </p>
    <!-- 退出按钮 -->
    <button id="logoutButton">退出</button>
  </div>


</div>

<script>
  document.getElementById('askButton').addEventListener('click', function () {
    const question = document.getElementById('question').value.trim();
    if (!question) {
      alert("请输入一个问题！");
      return;
    }

    const responseDiv = document.getElementById('response');
    responseDiv.style.display = 'none'; // 隐藏答案区域，等待新问题的响应

    // 清空之前的回答
    responseDiv.innerHTML = '';

    const token = localStorage.getItem('authToken');
    if(!token){
      alert("未登录，请重新登录！");
      return;
    }

    // 创建 EventSource 对象
    const eventSource = new EventSource(`http://127.0.0.1:8888/test/testAi2?question=${encodeURIComponent(question)}`);

    let buffer = '';  // 缓冲区，用来存储流式返回的数据

    // 监听 SSE 数据流
    eventSource.onmessage = function(event) {
      const data = event.data;
      if (data) {
        buffer += data;  // 将每次返回的内容添加到缓冲区中

        // 检查缓冲区中是否已经有完整的句子（即遇到句号）
        let sentenceEndIndex;
        while ((sentenceEndIndex = buffer.indexOf('。')) !== -1) {
          // 截取句子并创建新的 <p> 元素
          const sentence = buffer.slice(0, sentenceEndIndex + 1);
          const pElement = document.createElement('p');
          pElement.textContent = sentence.trim();  // 设置句子内容并去掉多余的空白
          responseDiv.appendChild(pElement);  // 将句子添加到显示区域

          // 更新缓冲区，保留句号后的部分作为下一次的开始
          buffer = buffer.slice(sentenceEndIndex + 1);
        }

        // 显示答案区域
        responseDiv.style.display = 'block';
      }
    };

    // 监听 SSE 流的结束
    eventSource.addEventListener(' ', function(event) {
      const finishMessage = document.createElement('p');
      finishMessage.textContent = "回答完毕";  // 最后一段显示“回答完毕”
      responseDiv.appendChild(finishMessage);
      eventSource.close(); // 关闭 SSE 连接
    });

    // 监听错误事件
    eventSource.onerror = function(event) {
      // 检查是否是正常关闭的连接
      if (eventSource.readyState === EventSource.CLOSED) {
        return;  // 如果连接已经被关闭，就不做任何处理
      }

      console.error("SSE 错误:", event);  // 输出错误日志以便调试
      eventSource.close(); // 关闭 SSE 连接，避免触发重复的错误
    };
  });

  // 退出按钮点击事件
  document.getElementById('logoutButton').addEventListener('click', function () {
    // 清除 localStorage 中的 authToken
    localStorage.removeItem('authToken');

    // 跳转到登录页面
    window.location.href = '/login.html'; // 假设登录页面的路径是 login.html
  });

  // 页面加载时检查是否已有 token
  window.onload = function () {
    const token = localStorage.getItem('authToken');
    if (!token) {
      // 如果没有 token，跳转到登录页面
      window.location.href = '/login.html';
    }
  }

  // 个人中心点击事件
  document.getElementById('profileLink').addEventListener('click', function () {
    const userName = localStorage.getItem('userName');  // 获取存储在 localStorage 中的用户名

    // 如果没有用户名，设置默认提示
    if (!userName) {
      document.getElementById('userName').textContent = '用户名: 未登录';
    } else {
      document.getElementById('userName').textContent = '用户名: ' + userName;
    }

    // 显示个人中心弹窗
    document.getElementById('profileModal').style.display = 'block';
  });

  // 关闭个人中心弹窗
  document.getElementsByClassName('close')[0].addEventListener('click', function () {
    document.getElementById('profileModal').style.display = 'none';
  });

  // 点击窗口外区域关闭弹窗
  window.onclick = function(event) {
    if (event.target === document.getElementById('profileModal')) {
      document.getElementById('profileModal').style.display = 'none';
    }
  }
</script>




</body>
</html>
